<template>
    <div class="ui-box">
        <div class="ui-bar ui-v-a">
            真实姓名
            <div class="float-right">
                <input type="text" maxlength="10" v-model="name" placeholder="填写收货人的姓名">
            </div>
        </div>
        <div class="ui-bar ui-v-a">
            手机号
            <div class="float-right">
                <input type="tel" maxlength="11" v-model="phone" placeholder="填写收货时的联系方式">
            </div>
        </div>
        <div class="ui-bar ui-v-a">
            所在省份
            <div class="float-right">
                <select v-model="province">
                    <option v-if="!province" value="0">未选择</option>
                    <option v-for="val of provinceList" :value="val.code">{{val.name}}</option>
                </select>
            </div>
        </div>
        <div class="ui-bar ui-v-a">
            所在城市
            <div class="float-right">
                <select v-model="city">
                    <option value="0" v-if="!city">未选择</option>
                    <option v-for="val of cityList" :value="val.code">{{val.name}}</option>
                </select>
            </div>
        </div>
        <div class="remark">
            <textarea placeholder="详细街道地址" v-model="place"></textarea>
        </div>
    </div>

    <footer class="ui-c-f">
        <button :class="['ui-btn-yellow', 'ui-v-a', canSubmit?'':'un']" @click="clickfb">
            <span>保存地址</span>
        </button>
    </footer>

    <div class="ui-page-holder"></div>
</template>

<script type="text/babel">
    import  {data as cityData ,getSelection }  from '../libs/city'
    import http from '../libs/http'
    import {orderService} from '../stores/order'

    export default{
        props: ['address'],

        data(){
            return {
                isAdd: true,
                province: 0,
                _id: '',
                city: 0,
                name: '',
                phone: '',
                place: '',
                provinceList: getSelection(),
                cityList: []
            };
        },
        computed: {
            canSubmit: function () {
                return this.province && this.city && this.name && this.phone.length == 11 && this.place;
            }
        },
        watch: {
            province: function (nVal) {
                this.city = 0;
                this.cityList = getSelection(nVal, 1);
            }
        },
        attached: function () {
            var self = this;
            if (this.$route.name == 'editAddress') {
                self.isAdd = false;

                var tmp = JSON.parse(decodeURIComponent(this.$route.params.address));

                self.province = tmp.province;
                self.name = tmp.receiver_name;
                setTimeout(function () {
                    self.city = tmp.city;
                });
                self.place = tmp.place;
                self._id = tmp._id;
                self.phone = tmp.phone;

                console.log(tmp);
            }
        },
        methods: {
            clickfb: function () {
                if (!this.canSubmit)
                    return;
                var self = this;

                var conditions = {
                    receiver_name: self.name,
                    phone: self.phone,
                    province: self.province,
                    city: self.city,
                    place: self.place
                };

                if (!self.isAdd)
                    conditions._id = self._id;

                http.exec({
                            url: api + 'user/address',
                            jsonp: true,
                            method: self.isAdd ? 'post' : 'put',
                            data: conditions
                        })
                        .then(function (obj) {
                            if (obj.code == 0) {
                                self.$dispatch('toast', self.isAdd ? '添加成功' : '修改成功');

                                orderService.changeAddress(obj.data);

                                history.back();

                            } else if (obj.msg)
                                self.$dispatch('toast', obj.msg);
                        })
            }
        }

    }
</script>

<style scoped>

    .ui-bar {
        font-size: 14px;
        border-bottom: solid 1px #f0f0f0;
    }

    .float-right {
        height: 100%;
        float: right;
    }

    input {
        padding: 8px;
        text-align: right;
        background: white;
        font-size: 15px;
        color: #888888;
    }

    select {
        padding: 8px;
        text-align: right;
        background: white;
        direction: rtl;
        font-size: 15px;
        color: #888888;
    }

    .remark {
        padding: 8px 16px;
    }

    .remark textarea {
        color: #888888;
        width: 100%;
        padding: 8px;
        right: 10px;
        border: solid 1px #f0f0f0;
        background: #fafafa;
        position: relative;
        height: 100px;
        display: block;
        resize: none;
        font-size: 15px;
    }

    footer .ui-btn-yellow {
        float: right;
        padding: 0;
        height: 34px;
        margin: 5px;
    }

    footer .ui-btn-yellow.un {
        background: #dddddd;
        color: #888888;
    }

</style>